<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/sougou.css"/>
		<link rel="stylesheet" type="text/css" href="css/denglu.css"/>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="wrap">
				<!-- 头部左边 -->
				<a href="#" class="hl">搜狗商城</a>
				<span class="hl">|</span>
				<a href="#" class="hl">意见反馈</a>
				<span class="hl">|</span>
				<a href="#" class="hl">收藏本站</a>
				<!-- 头部右边 -->
				<a href="#" class="hr car">购物车 (0)</a>
				<a href="#" class="hr">在线客服</a>
				<span class="hr">|</span>
				<a href="#" class="hr phoneMall">手机商城
				<!-- 二维码 -->
				<div class="qrcode-box">
					<img src="img/qrcode.jpg" >
					<div class="desc">微信扫码用手机购买</div>
				</div>
				</a>
				
				<span class="hr">|</span>
				<a href="#" class="hr">s码通道</a>
				<span class="hr">|</span>
				<a href="#" class="hr">注册</a>
				<a href="#" class="hr">登录</a>
			</div>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<div class="wrap">
				<div class="logo">
					<span class="icon-logo"></span>
					<span class="name">搜狗商城</span>
				</div>
				<ul class="menu">
					<li class="menuitem"><a href="">首页</a></li>
					<li class="menuitem">
						<a href="" class="ittras">智能翻译</a>
						<!-- 智能翻译菜单 -->
						<div class=" sub-menu it">
							<ul class="wrap">
								<li class="sub-item">
									<a href="#" class="c1max">
										<span class="cover"><img src="img/c1max.jpg" ></span>
										<span class="name">搜狗AI录音笔C1 Max</span>
										<span class="price">¥ 798</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="pen">
									<span class="cover"><img src="img/pen.jpg" ></span>
									<span class="name">搜狗出品 糖猫词典笔</span>
									<span class="price">¥ 799</span>
								</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
									<a href="#" class="c1">
										<span class="cover"><img src="img/c1.jpg" ></span>
										<span class="name">搜狗AI录音笔C1</span>
										<span class="price">¥ 398</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="s1">
									<span class="cover"><img src="img/s1.jpg" ></span>
									<span class="name">搜狗AI录音笔C1</span>
									<span class="price">¥ 2698</span>
								</a>
									<span class="sub-sep"></span>	
								</li>
								<li class="sub-item">
									<a href="#" class="c1pro">
										<span class="cover"><img src="img/c1pro.jpg" ></span>
										<span class="name">搜狗AI录音笔C1 Pro</span>
										<span class="price">¥ 598</span>
									</a>
										<span class="sub-sep"></span>	
								</li>
								<li class="sub-item">
									<a href="#" class="e1">
										<span class="cover"><img src="img/e1.jpg" ></span>
										<span class="name">搜狗AI录音笔e1</span>
										<span class="price">¥ 1298</span>
									</a>
								</li>
							</ul>
						</div>
					</li>
					
					<li class="menuitem">
						<a href="" class="tangmao-watch">糖猫手表</a>
						<!-- 糖猫手表菜单 -->
						<div class="sub-menu watch">
							<ul class="wrap">
								<li class="sub-item">
									<a href="#" class="a10">
										<span class="cover"><img src="img/a10.jpg" ></span>
										<span class="name">糖猫A10</span>
										<span class="price">¥ 399</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="k1">
									<span class="cover"><img src="img/k1.jpg" ></span>
									<span class="name">糖猫K1</span>
									<span class="price">¥ 499</span>
								</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
									<a href="#" class="plus2">
										<span class="cover"><img src="img/plus2.jpg" ></span>
										<span class="name">糖猫plus2</span>
										<span class="price">¥ 199</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="y1">
									<span class="cover"><img src="img/y1.jpg" ></span>
									<span class="name">糖猫Y1</span>
									<span class="price">¥ 598</span>
								</a>
									<span class="sub-sep"></span>	
								</li>
								<li class="sub-item">
									<a href="#" class="dazyihou">
										<span class="cover"><img src="img/dazuihou.jpg" ></span>
										<span class="name">JOY2大嘴猴联名款</span>
										<span class="price">¥ 319</span>
									</a>
										<span class="sub-sep"></span>	
								</li>
								<li class="sub-item">
									<a href="#" class="joy2">
										<span class="cover"><img src="img/joy2.jpg" ></span>
										<span class="name">糖猫Joy2</span>
										<span class="price">¥ 319</span>
									</a>	
								</li>
							</ul>
						</div>
					</li>
					
					<li class="menuitem">
						<a href="" class="nav-part">配件</a>
						<!-- 配件菜单 -->
						<div class="sub-menu part">
							<ul class="wrap">
								<li class="sub-item">
									<a href="#" class="tt2">
										<span class="cover"><img src="img/t2.jpg" ></span>
										<span class="name">糖猫T2 卡通吊坠保护套</span>
										<span class="price">¥ 60</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="basic">
									<span class="cover"><img src="img/basic.jpg" ></span>
									<span class="name">basic 卡通吊坠保护套</span>
									<span class="price">¥ 60</span>
								</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
									<a href="#" class="bag">
										<span class="cover"><img src="img/bag.jpg" ></span>
										<span class="name">糖猫学生儿童小书包</span>
										<span class="price">¥ 99</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="t2basic">
									<span class="cover"><img src="img/t2basic.jpg" ></span>
									<span class="name">T2/basic专用原装表带</span>
									<span class="price">¥ 80</span>
								</a>
									<span class="sub-sep"></span>	
								</li>
								<li class="sub-item">
									<a href="#" class="color">
										<span class="cover"><img src="img/color.png" ></span>
										<span class="name">Color专用表带</span>
										<span class="price">¥ 59</span>
									</a>
								</li>
							</ul>
						</div>
					</li>
					<li class="menuitem"><a href="">社区</a></li>
					<li class="menuitem">
						<a href="" class="solve">AI 智能解决方案</a>
						<!-- AI 智能解决方案菜单 -->
						<div class="sub-menu subject">
							<ul class="wrap">
								<li class="sub-item">
									<a href="#" class="xiaoshou">
										<span class="cover"><img src="img/AIlogo1.png" ></span>
										<span class="name">智能销售</span>
									</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
								<a href="#" class="bangong">
									<span class="cover"><img src="img/AIlogo2.png" ></span>
									<span class="name">智能办公</span>
								</a>
									<span class="sub-sep"></span>
								</li>
								<li class="sub-item">
									<a href="#" class="jiaoyu">
										<span class="cover"><img src="img/AIlogo3.png" ></span>
										<span class="name">智能教育</span>
									</a>
									<span class="sub-sep"></span>
								</li>
							</ul>
						</div>
					</li>
					<li class="menuitem"><a href="">录音笔网页版</a></li>
					</ul>
			</div>
		</div>
		<!--登录框内容 -->
		<div id="app-content">
			<div class="login-main">
				<a href="" class="bg"></a>
				<div class="login-form">
					<div class="login-title">
						<div class="login-form-tit active">密码登录</div>
						<div class="login-line">|</div>
						<div class="login-form-tit">短信登录</div>
					</div>
					<div class="input-row">
						<div class="input-box">
							<input type="text"  id="usr" class="input-txt" placeholder="请输入手机号">
						</div>
					</div>
					<div class="input-row row-pwd">
						<div class="input-box">
							<input type="password" id="pwd" class="input-txt" placeholder="请输入密码">
							<em class="icon-hide"></em>
						</div>
					</div>
					<div class="input-row row-auto">
						<label for="" class="check-label">
							<input type="checkbox" id="autologin">
							<span class="auto">下次自动登录</span>
						</label>
						<span class="errTip">请输入正确的密码</span>
					</div>
					<div class="input-row row-btn">
						<a href="" class="login-btn">登 录</a>
					</div>
					<div class="input-row row-links">
						<a href="" class="fl">手机号快速注册</a>
						<a href="" class="fr">找回密码</a>
					</div>
					<div class="input-row row-center">登录即代表您已经同意<a href="">《用户协议》</a>和<a href="">《隐私政策》</a></div>
				</div>
			</div>
		</div>
		<!-- 页脚 -->
		<div class="footer">
			<div class="wrap">
				<div class="service">
					<!-- 左边 -->
					<div class="intro">
						<div class="flag">搜狗商城让生活更智能更方便</div>
						<ul class="icon-list">
							<li >
								<i class="fun"></i>
								<span>科技乐趣</span>
							</li>
							<li>
								<i class="ai"></i>
								<span>人工智能</span>
							</li>
							<li>
								<i class="traslate"></i>
								<span>智能翻译</span>
							</li>
							<li>
								<i class="life"></i>
								<span>智能生活</span>
							</li>
							<li>
								<i class="safe"></i>
								<span>可靠贴心</span>
							</li>
						</ul>
					</div>
					<!-- 中间 -->
					<div class="follow">
						<div class="focus">
							关注搜狗商城，<span>优惠活动</span>早知道
						</div>
						<ul class="code">
							<li>
								<img src="img/code1.jpg" alt="">
								<span>微信公众号</span>
							</li>
							<li>
								<img src="img/code2.jpg" alt="">
								<span>小程序</span>
							</li>
						</ul>
					</div>
					<!-- 右边 -->
					<div class="contact">
						<ul class="service-after">
							<li>
								<i class="icon-service-7"></i>
								<span>7天免费退货</span>
							</li>
							<li>
								<i class="repair"></i>
								<span>一年内保修</span>
							</li>
						</ul>
						<div class="btm">
							<span class="service-phone">客服电话</span>
							<span class="tel">400-123-7676</span>
							<span class="time">周一至周日 9:00 - 21:00</span>
							
						</div>
					</div>
				</div>
				<!-- 底部 -->
				<div class="base-footer">
					<div class="links">
						<a href="#">关于我们</a>
						<a href="#">意见反馈及投诉</a>
						<a href="#">用户协议</a>
						<a href="#">隐私政策</a>
						<a href="#">网址大全</a>
						<a href="#">售后服务</a>
						<a href="#">营业执照</a>
					</div>
					<div class="copyright">Copyright ©京ICP证050897号/京ICP备11001839号-1/京公网安备11000002000025号<i class="gongan"></i></div>
				</div>
			</div>
		</div>
		<!-- 右侧功能 -->
		<div class="toolbar">
			<div class="tools">
				<a href="#" class="center">
					<i class="icon-center"></i>
					<span>个人中心</span>
				</a>
				<a href="#" class="shopcar">
					<i class="icon-car"></i>
					<span>购物车</span>
				</a>
				<a href="#" class="online">
					<i class="icon-online"></i>
					<span>在线客服</span>
				</a>
			</div>
		</div>
		<!-- 二维码显示隐藏 -->
		<script type="text/javascript">
			$(".phoneMall").hover(function(){
			    $(".qrcode-box").css("display","block");
			    },function(){
			    $(".qrcode-box").css("display","none");
			  });
			  </script>
		<!-- 智能翻译菜单显示隐藏 -->
		<script type="text/javascript">
		$(".ittras").hover(function(){
		    $(".it").css("display","block");
		    },function(){
		    $(".it").css("display","none");
		  });
		</script>
		<!-- 糖猫手表菜单显示隐藏-->
		<script type="text/javascript">
			$(".tangmao-watch").hover(function(){
			    $(".watch").css("display","block");
			    },function(){
			    $(".watch").css("display","none");
			  });
		</script>
		<!-- 配件菜单显示隐藏 -->
		<script type="text/javascript">
			$(".nav-part").hover(function(){
			    $(".part").css("display","block");
			    },function(){
			    $(".part").css("display","none");
			  });
		</script>
		<!-- AI 智能解决方案菜单显示隐藏 -->
		<script type="text/javascript">
			$(".solve").hover(function(){
			    $(".subject").css("display","block");
			    },function(){
			    $(".subject").css("display","none");
			  });
		</script>
	</body>
</html>
